<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>找回密码</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
		<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<style>
			html,
			body {
				min-height: 100vh;background: #1c83fc;
			}
			ul, ol { list-style:none; } 
			
			body input[type='text'],ul,li,input[type='password']{padding: 0;margin: 0;border: 0;border-radius: 0;}
			:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #fff; opacity:1; }
			
			::-moz-placeholder { /* Mozilla Firefox 19+ */color: #fff;opacity:1;}
			
			input:-ms-input-placeholder{color: #fff;opacity:1;}
			.mui-bar{background: transparent;}
			input::-webkit-input-placeholder{color: #fff;opacity:1;}
			.clear{clear:both;height:0;font-size:0;line-height:0;visibility:hidden; overflow:hidden;}
			/*顶部*/
			
			/*登录表单*/
			.mui-content{background: transparent;}
			#register_rorm{padding: 0 0.906rem;margin-top: 1.333rem;}
			#register_rorm .title{text-align: center;color: #fff;font-size: 0.8rem;margin: 0 0 2.666rem 0;}
			#register_rorm .inp{width: 100%;display: flex;align-items: center;justify-content: space-between;height: 0.88rem;border-bottom: 2px solid #fff;margin-bottom: 0.5rem;}
			#register_rorm .inp input[type='text'],#register_rorm .inp input[type='password']{width: 5rem;height: 0.6rem;line-height: 0.6rem;background: transparent;color: #fff;font-size: 0.453rem;text-indent: 0.266rem;}
			#register_rorm .phone span{font-size: 0.44rem;color: #fff;display: flex;align-items: center;}
			#register_rorm .phone span i{font-size: 0.44rem;}
			#register_rorm .btn_span{color: #353535;font-size: 0.32rem;border-radius: 0.26rem;background: #e5e5e5;line-height: normal;padding:  0.1rem 0.4rem;}
			#register_rorm .btn_span:disabled{opacity: 1;}
			#register_rorm .ckeck{text-align: center;margin-bottom: 0.2rem;}
			#register_rorm .ckeck label{font-size: 0.293rem;color: #fff;}
			#register_rorm .ckeck i{font-size: 0.293rem;color: #fff;}
			#register_rorm .btn{width: 8rem;height: 1.066rem;line-height: 1.066rem;font-size: 0.52rem;color: #fff;text-align: center;background: rgba(255,255,255,0.4);border-radius: 0.1rem;margin-bottom: 0.373rem;margin-top: 1.373rem;}
			#register_rorm .txt{display: flex;justify-content: space-between;}
			#register_rorm .txt a{font-size: 0.426rem;color: #fff;text-decoration: underline;}
			#register_rorm .bottom{position: fixed;bottom: 1.12rem;width: 8rem;text-align: center;color: #fff;}
			#register_rorm .bottom p{color: #fff;margin-bottom: 0.573rem;font-size: 0.426rem;}
			#register_rorm .bottom .wx{width: 3.706rem;height: 0.786rem;display: flex;justify-content: center;align-items: center;border:2px solid #fff ;border-radius: 0.2rem;margin: 0 auto;}
			#register_rorm .bottom .wx span{color: #fff;}
			#register_rorm .bottom .wx i{font-size: 0.48rem;margin-left: 0.133rem;}
		</style>
	</head>


	<body>
		<!--顶部-->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title"></h1>
		</header>
		<div class="mui-content">
			<div id="register_rorm">
				<div class="title">
					找回密码
				</div>
				<div class="inp phone">
					<input type="text" name="" id="text" value="" placeholder="请输入手机号"/>
					<!--<span class="">+61<i class="mui-icon mui-icon-arrowright"></i></span>-->
				</div>
				<div class="inp">
					<input type="password" name="" id="password" value="" placeholder="请输入验证码"/>
					<input type="button" name="btn_span" class="btn_span" value="获取验证码" />
				</div>
				
				<div class="btn" id="subbtn">
					下一步
				</div>
				
			</div>
		</div>
		
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript" charset="utf-8">
            var vue = new Vue({
                el: '#app',
                data: {},
            })
			 //mui初始化
			mui.init({
				swipeBack: false
			});
			mui('#ckeck').on('change','input',function(){
				var checked = this.checked
				var i = document.querySelector('#i')
				if (checked){
					i.classList.remove('icon-zhengfangxuanze')
					i.classList.add('icon-zhengfangxuanzegou')
				}else{
					i.classList.remove('icon-zhengfangxuanzegou')
					i.classList.add('icon-zhengfangxuanze')
				}
				console.log(this.checked)
			})
			mui.plusReady(function(){
	      		var originalHeight=document.documentElement.clientHeight || document.body.clientHeight;//获取原始窗口的高度
	      		window.onresize=function(){
	      			var  resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;//软键盘弹起与隐藏  都会引起窗口的高度发生变化
	      			if(resizeHeight*1<originalHeight*1){//resizeHeight<originalHeight  证明窗口被挤压了
	      				plus.webview.currentWebview().setStyle({
	      					height:originalHeight
	      				});
	      			}
	      		}
	      	});

             //发送验证码
             var time=60;
             mui('#register_rorm').on('tap','.btn_span',function() {
                 var that = this;
                 var text = mui('#text')[0].value;
                 var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
                 if (text == '' || text == undefined) {
                     mui.toast("手机号不能为空", {duration: 'short', type: 'div'});
                     return false;
                 } else if (!myreg.test(text)) {
                     mui.toast("手机号不正确", {duration: 'short', type: 'div'});
                     return false;
                 } else {
                     mui.get(url + "api/User/checkcode", {phone: text}, function (data) {
                         mui.toast('发送成功', {duration: 'long', type: 'div'});
                         var set = setInterval(function () {
                             if (time == 0) {
                                 that.value = '重新获取';
                                 that.disabled = ''
                                 time = 60
                                 clearInterval(set);
                             } else {
                                 time--;
                                 that.value = time + '秒后重新获取';
                                 that.disabled = 'disabled'
                             }
                         }, 1000);
                         console.log(data);
                         if(!data){
                             mui.toast('网络错误,请重新发送!', {duration: 'long', type: 'div'});
                             return false;
                         }else{
                             vue.yanzhengma = data
                         }
                     }, 'json');
                 }
             });

            //验证验证码正确性
            var btn = document.getElementById('subbtn')
            btn.addEventListener('tap',function(){
                var text = mui('#text')[0].value
                var pwd = mui('#password')[0].value
                if (text == '' || text == undefined) {
                    mui.toast('请输入手机号',{ duration:'short', type:'div' });
                    return false;
                }
                if(pwd == '' || pwd == undefined){
                    mui.toast('请输入验证码',{ duration:'short', type:'div' });
                    return false;
                }
                if(pwd != vue.yanzhengma){
                    mui.toast('验证码输入错误',{ duration:'short', type:'div' });
                    return false
                }
                mui.get(url+"api/User/phoness",{phone:text},function(data){
                    console.log(data);
                    if(data != 1){
                        mui.toast('该手机号未注册',{ duration:'short', type:'div' });
                        return false;
                    }else{
                        mui.openWindow({
                            url: 'register_next.html?phone='+text,
                            id:'register_next',
                            extras:{
                                phone:'text'
                            },
                        });
                    }
                });
            })
	      	
	      	
	      	
	      	
		</script>
	</body>

</html>